<template>
  <view class="activity">
    <my-nav class-name="nav" />
    <view
      class="rulebtn"
      @click="navigateTo({ url: '/pagesA/activity_rules/index' })"
    >
      <text>规</text>
      <text>则</text>
    </view>
    <Gift></Gift>
    <TheCharts></TheCharts>
  </view>
  <Dialog></Dialog>
  <my-action-sheet v-if="showActionSheetModel"></my-action-sheet>
  <my-sticky-button v-if="userStore.userInfo?.uid && !userStore.userInfo?.is_user_channel" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onShow, onShareAppMessage } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores";
import Api from "@/utils/http";
import myNav from "@/components/my-nav.vue";
import myActionSheet from "@/components/my-action-sheet.vue";
import Gift from "./modules/Gift.vue";
import TheCharts from "./modules/TheCharts.vue";
import Dialog from "./modules/Dialog.vue";
import state, { getConfig, getList } from "./useState";

const userStore = useUserStore();
const { navigateTo } = uni;
const query = { id: "" };
const showActionSheetModel = ref(true);

onLoad((q) => {
  Object.assign(query, q);
});
onShow(() => {
  if (userStore.userInfo !== undefined || userStore.loginStatus) {
    showActionSheetModel.value = false;
    uni.showTabBar({ animation: false });
  } else {
    showActionSheetModel.value = true;
    uni.hideTabBar({ animation: false });
  }
  initState();
});
onShareAppMessage(() => {
  return {
    path: `/pages/activity/index?id=${state.user_id}`,
    imageUrl: "https://images-cloud.qboson.com/miniProgram/share_card.png",
  };
});
uni.$on("loginSuccess", () => {
  initState();
});
uni.$on("closeActionSheet", function () {
  showActionSheetModel.value = false;
  userStore.clearUserInfo();
  uni.showTabBar({ animation: false });
});

const initState = () => {
  getConfig();
  getList();
  Api.get("queen/first_entry/", { returnCode: true }).then((res) => {
    if (res.code === "0") state.modalOne = true;
  });
  Api.get("queen/confirm_quota/", { returnCode: true }).then((res) => {
    if (res.code === "0")
      Object.assign(state.modalShare, res.data, { show: true });
  });
  if (query.id) {
    Api.post(
      "queen/share_quota/",
      { share_user_id: query.id },
      { returnCode: true }
    );
  }
};
</script>

<style scoped lang="scss">
.activity {
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  @mixin back {
    background: radial-gradient(
        67% 16% at 85% -1%,
        #ffe6db 0%,
        rgba(255, 232, 177, 0) 100%
      ),
      radial-gradient(
        145% 79% at 17% 0%,
        rgba(255, 174, 139, 0.6) 0%,
        rgba(255, 222, 190, 0.6) 40%,
        rgba(255, 255, 255, 0.6) 100%
      ),
      #f8f8f8;
    background-size: 100vw 100vh;
  }
  @include back;
  ::v-deep .nav {
    @include back;
  }

  .rulebtn {
    position: absolute;
    top: 108px;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 64px;
    background-image: url(/static/img/ti_xing.png);
    background-size: 100% 100%;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
